<!--
  Author: 善良的YWJ
  Created by shanliangdeYWJ on 2021/01/24
  File: 01.5.1创建refs.html
  Description: "
  
   请输入文件描述内容
  
			   " 
  Github: https://github.com/shanliangdeYWJ
-->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
	<meta name="keywords" content="">
	<meta name="description" content="">
	<title>01.5.1创建refs</title>
	<style></style>
</head>

<body>
	<p>1.创造一个空节点， </p>
	<p>2.指定ref </p>
	<p>3.然后通过ref找到节点， </p>
	<p>4.给结点 赋值 </p>
	<div id="root"></div>

	<!-- 加载 React。-->
	<!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
	<!--<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
	<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>-->
	<script src="../js/react@16.development.js" crossorigin></script>
	<script src="../js/react-dom@16.development.js" crossorigin></script>
	<script src="../js/babel@6.min.js"></script>
	<!-- <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script> -->

	<!-- 加载我们的 React 组件。-->
	<script type="text/babel">

		/**
		 * refs 提供方式让我们访问
		 * 	1. DOM 节点
		 * 	2. render 方法中创建的 React 元素
		 * 
		 * 场景
		 * 	1. 管理焦点 focus （文本选择，媒体播）
		 * 	2. 触发强制动画
		 * 	3. 继承第三方 DOM 库
		 * 
		 * 禁止
		 * 	避免 refs 做任何可以通过声明式来完成的事情
		 * 		- 避免在 Dialog 组件里暴露 open() 和 close() 方法，最好传递 isOpen 属性。
		 */
		class MyComponent extends React.Component {
			constructor(props) {
				super(props);
				this.myRef = React.createRef();
			}
			componentDidMount() {
				this.referRefHandle()
			}
			referRefHandle() {
				const node = this.myRef.current;
				node.innerHTML = 11
			}
			render() {
				return <div ref={this.myRef}></div>;
			}
		}

		ReactDOM.render(
			<MyComponent />,
			document.getElementById('root')
		);

		/**
		 * 创建 Refs
		 *
		 * 	1. ref 属性
		 * 	2. React.createRef() 创建 Refs
		 *
		 * 	想要在整个组件中引用 Refs ，必须将 Refs 分配给实例属性
		 */
	</script>
</body>

</html>